<template>
  <el-form :model="tableForm" ref="formRef">
    <div style="margin-bottom: 10px"><span style="color:var(--color-danger);margin-right: 4px">*</span>备件列表：</div>
    <div style="margin-left: 10px">
      <el-table :data="tableForm.table" border :header-cell-style="{'text-align':'center'}"
                :cell-style="{'text-align':'center'}">
        <el-table-column type="index" label="序号" fixed width="50"></el-table-column>
        <el-table-column label="备件编号" width="220">
          <template slot-scope="scope">
            <el-form-item label-width="0" :prop="`table.${scope.$index}.value1`"
                          :rules="{required: true, message: '备件编号为必需', trigger: 'blur'}">
              <el-input placeholder="备件编号" disabled></el-input>
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="名称" width="220">
          <template slot-scope="scope">
            <el-form-item label-width="0" :prop="`table.${scope.$index}.value2`"
                          :rules="{required: true, message: '备件名称必需', trigger: 'change'}">
              <el-autocomplete v-model="scope.row.value4" :fetch-suggestions="querySearchAsync" class="w-full"
                               placeholder="搜索备件名称" value-key="nickname" @select="handleSelect">
                <template #default="{ item }">
                  <div>备件编号：{{ item.address }}</div>
                  <span class="link">库存： {{ item.city_name }}</span>
                  <el-divider/>
                </template>
              </el-autocomplete>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="规格" width="220">
          <template slot-scope="scope">
            <el-form-item label-width="0" :prop="`table.${scope.$index}.value3`"
                          :rules="{required: true, message: '备件规格为必需', trigger: 'blur'}">
              <el-input placeholder="备件规格" disabled></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="型号" width="220">
          <template slot-scope="scope">
            <el-form-item label-width="0" :prop="`table.${scope.$index}.value4`"
                          :rules="{required: true, message: '备件型号为必需', trigger: 'blur'}">
              <el-input placeholder="型号" disabled></el-input>
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="单位" width="220">
          <template slot-scope="scope">
            <el-form-item label-width="0" :prop="`table.${scope.$index}.value5`"
                          :rules="{required: true, message: '备件单位为必需', trigger: 'blur'}">
              <el-input placeholder="备件单位" disabled></el-input>
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="入库数" width="220">
          <template slot-scope="scope">
            <el-form-item label-width="0" :prop="`table.${scope.$index}.value5`"
                          :rules="{required: true, message: '入库数量为必需', trigger: 'blur'}">
              <el-input placeholder="入库数量" type="number"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="80">
          <template slot-scope="scope">
            <el-link type="danger" style="font-size: 18px" icon="el-icon-delete"
                     :disabled="tableForm.table.length<=1 "
                     @click="delList(scope.$index)"></el-link>
          </template>
        </el-table-column>
      </el-table>
      <div class="add-btn" @click="addList" style="margin-top: 5px"><i class="el-icon-plus"></i></div>
    </div>
  </el-form>
</template>

<script>
export default {
  name: "editTable",
  data() {
    return {
      loading: false,
      options: [
        {value: '1', label: '吊装', name: 'tset1'},
        {value: '2', label: '内部链接', name: 'tset2'},
        {value: '3', label: '拼接', name: 'tset3'},
        {value: '4', label: '调试', name: 'tset4'},
        {value: '5', label: '验收', name: 'tset5'},
      ], //任务类型
      options2: [],
      tableForm: {
        table: [
          {
            value1: "",
            value2: "",
            value3: '',
            value4: '',
            value5: '',
            value6: '',
          }
        ]
      },
    }
  },
  watch: {
    'tableForm.table': {
      handler(current) {
        this.$emit('change', current)
      },
      deep: true
    }
  },
  methods: {
    //远程搜索获取设备
    querySearchAsync(query, cb) {
      query = query ? query : ''
      this.$http.get(`/customers?limit=10&keyword=${query} `).then((res) => {
        cb(res.data.data);
      });
    },
    /*选择备件*/
    handleSelect() {

    },
    addList() {
      this.tableForm.table.push(
        {
          value1: "",
          value2: "",
          value3: '',
          value4: '',
          value5: '',
          value6: '',
        }
      )
    },
    delList(index) {
      this.$confirm("是否确认删除？", "提示", {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.tableForm.table.splice(index, 1)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    validate() {
      this.$refs.formRef.validate(valid => {
        return valid
      })
    },
  }

}
</script>

<style scoped lang="scss">

.el-dialog:not(.ele-dialog-form) .el-dialog__body .el-form .el-form-item:last-child {
  margin-bottom: 0;
}

.add-btn {

  height: 57px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px dashed var(--color-primary);
  //letter-spacing:1rem;
  i {
    font-size: 18px;
    color: var(--color-primary);
    font-weight: bolder;
  }

  &:hover {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
    cursor: pointer;
  }

  &:active {
    color: var(--color-primary-7);
    border-color:var(--color-primary-7);
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
  }
}


</style>

